<template>
    <h1>vue3 新特性</h1>
   <input type="text" v-model="str">
   <h4>{{str}}</h4>


   <input type="text" v-model="name1">
   <h4>{{name1}}</h4>


   <h4>{{name2.nickname}}</h4>
   <h4>{{name3.nickname}}</h4>

   <hr/>

    <!-- 父传字  属性传值 -->
    <son1 :nickname="nickname" :age='age'></son1>
    <!-- 设置好值与事件 -->
    <son2 sondata="hello world" @parent="demo3"></son2>

</template>
<script>
// 引入新特性
import {ref,reactive} from 'vue'

// 引入子组件
import son1 from './son1.vue'
import son2 from './son2.vue'


    export default {
        name:'Vue3Index',

        data() {
            return {
                str:'vue之前的写法',//可以数据响应式
            }
        },
        
        // 加载子组件
        components:{
            son1,
            son2,
            
        },

        // Vue3特性
        setup() {
            //基础类型数据
            let str="hello world"
            // 把基础类型的数据变成响应式,
            var name1=ref(str)

            // 但  是他不会改变原变量的数据
            setTimeout(() => {
                //修改响应式数据
                name1.value = 'hello zhangsan'//设置、获取值时需要加.value

                //检查是否有修改
                console.log(name1.value)

                //检查原来的数据 不会改变原数据的内容
                console.log(str)
            },1000)






            // ref为复杂数据类型添加响应式状态（不建议）
            var obj={nickname:'张三',age:20,sex:'男'}
            var name2=ref(obj);//转为响应式

            //试着改变值(改变要用value)
            setTimeout(()=>{
                name2.value.nickname="李飞";
                console.log(name2.value);
            },1000)







            // 构建复杂类型的数据
            var obj2={nickname:'小米',age:10,sex:'女'};
            var name3=reactive(obj2)//转为响应式

             // reactive 不需要通过.value 来获取 直接获取就可以
             setTimeout(()=>{
                 console.log(name3.nickname);
                 name3.nickname='小米'
                 
             },1000)



            // 父传子
            let nickname=ref('vue3张三父传子')
            let age=ref(20)



            // 子传父亲
            let demo3=(data)=>{
                console.log(`子组件传第的数据为：`);
                console.log(data);
            
            }





            //  通过return返回数据
             return {
                 name1,
                 name2,
                 name3,
                //  把父亲传的值return 出去
                nickname,
                age,
                demo3,

             }

        }
    }

</script>